<script src="${ctx}/assets/js/fuelux/fuelux.tree.js"></script>
<script type="text/javascript">
var roles="${roles}";
var relationId="${relationId}";
$(function(){	
	$("#userMenuTree").ace_tree({
		'dataSource': dataSource,
		'multiSelect': false,
		'cacheItems': true,
		'checkbox-icon':true,//是否有checkbox
		'open-icon' : 'ace-icon tree-minus',
		'close-icon' : 'ace-icon tree-plus',
		'selectable' : true,
		'selected-icon' : 'ace-icon fa fa-check',
		'unselected-icon' : 'ace-icon fa fa-times',
		'loadingHTML' : '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>'
	});	
	//处理 checkbox选中
	$('#userMenuTree').on('selected.fu.tree', function (event, data) {
	});
	$('#userMenuTree').on('opened.fu.tree', function (event, data) {
	});
});

//根据角色获取菜单信息
function getRoleMenuLevel2(parentId) {
	var $data = null;
	var param={
			roleIdstr:roles,
			relationId:relationId,
			parentId:parentId
	};
	$.ajax({
		async : false,
		url: "${ctx}/user/getUserMenu.do",
		type:"post",
		data: param,
		dataType:"json",
		success: function(ret){	
			$data = ret;							
		},
		error: function(ret){
			alert("获取菜单异常:"+ret.responseText);
			$data = {};
		}
	});	
	return $data;	
}
//根据角色获取菜单信息
function getRoleMenuLevel1() {
	var $data = null;
	var param={
			roleIdstr:roles,
			relationId:relationId
	};
	$.ajax({
		async : false,
		url: "${ctx}/user/getUserMenu.do",
		type:"post",
		data:param,
		dataType:"json",
		success: function(ret){	
			$data = ret;							
		},
		error: function(ret){
			alert("获取菜单异常:"+ret.responseText);
			$data = {};
		}
	});	
	return $data;	
}
	
function dataSource(options, callback) {
	var $data = null;
	if(!("text" in options) && !("type" in options)){
		$data = getRoleMenuLevel1();//the root tree
		callback({ data: $data });
		return;
	}
	if("nodeType" in options && options.nodeType == "org") {
		$data = getRoleMenuLevel2(options.id);
	} 
	if($data != null) {
		//this setTimeout is only for mimicking some random delay
		setTimeout(function(){callback({ data: $data });} , parseInt(Math.random() * 500) + 200);
	}
}
</script>

<div class="row">
	<div class="col-xs-12">
		<div class="row">
			<div class="col-sm-12">
				<div class="widget-box widget-color-blue2">
					<div class="widget-body">
						<div class="widget-main padding-8">
							<ul id="userMenuTree" class="tree"></ul>
						</div>
					</div>
				</div>
			</div>	
		</div>
	</div><!-- /.col -->
</div><!-- /.row -->